<template>
    <div class="indpro">
        <div class="title  title3">
            <h2>{{ chanpin_title }}</h2>
            <p>{{ chanpin_desc }}</p>
            <span></span>
        </div>
        <div class="w1700">


            <!--
            <div class="proimg">
                <ul class="slides">
                    <li v-for="item in chanpin_lunbo" class="flex-active-slide"
                        style="width: 100%; float: left; margin-right: -100%;
                         position: relative; opacity: 1; display: block; z-index: 2;">
                        <a :href="item.link">
                            <img :src="item.img" draggable="false"></a>
                    </li>
                </ul>
                <ol class="flex-control-nav flex-control-paging">
                    <li><a class="flex-active">1</a></li>
                    <li><a class="">2</a></li>
                    <li><a class="">3</a></li>
                </ol>
                <ul class="flex-direction-nav">
                    <li><a class="flex-prev" href="#"></a></li>
                    <li><a class="flex-next" href="#"></a></li>
                </ul>
            </div>
        -->

            <div class="proimg">
                <el-carousel height="">
                <el-carousel-item v-for="(item, index) in chanpin_lunbo" :key="index">

                    <a :href="item.link" :title="item.title" style="height:100%; width:100%; display: inline-block;text-align: center;">
                        <!-- <img style="width:100%" :src="vite_url +'/storage/'+item.img" /> -->
                        <img style="height:100%" :src="vite_url +'/storage/'+item.img" />
                    </a>
                </el-carousel-item>
            </el-carousel>
            </div>

            <div class="wen">
                <dl v-for="( item, index ) in chanpin_aside" :key="index" :class="index % 2 == 1 ? 'lr' : ''">
                    <a :href="item.link">
                        <dt><img :src="vite_url + '/storage/' + item.img">
                        </dt>
                        <dd>
                            <p>{{ item.title }}</p>
                            <span>查看详情</span>
                        </dd>
                    </a>
                </dl>
                <!--
                <dl><a href="https://www.sheng-han.com/lzspy/395.html">
                        <dt><img src="https://www.sheng-han.com/upload/cms/20210326/50c9f5d04b354a60e1131e9daa7616b7.jpg">
                        </dt>
                        <dd>
                            <p>熠远精科CIC-D100型国产离子色谱仪</p>
                            <span>查看详情</span>
                        </dd>
                    </a></dl>

                <dl class="lr"><a href="https://www.sheng-han.com/lzspy/393.html">
                        <dt><img src="https://www.sheng-han.com/upload/cms/20210326/83d023004617e5401279e661e657edca.jpg">
                        </dt>
                        <dd>
                            <p>熠远精科CIC-D160型离子色谱仪</p>
                            <span>查看详情</span>
                        </dd>
                    </a></dl>

                <dl><a href="https://www.sheng-han.com/systs/713.html">
                        <dt><img src="https://www.sheng-han.com/upload/cms/20210326/5e944e5479068c8cf3fbf6ace7d3e4d6.jpg">
                        </dt>
                        <dd>
                            <p>熠远精科CIC-D180/180H型离子色谱仪</p>
                            <span>查看详情</span>
                        </dd>
                    </a></dl>

                <dl class="lr"><a href="https://www.sheng-han.com/lzspy/394.html">
                        <dt><img src="https://www.sheng-han.com/upload/cms/20220317/d596a65a65faca9214008afad456441f.jpg">
                    </dt>
                    <dd>
                        <p>CIC-P60便携式离子色谱仪</p>
                        <span>查看详情</span>
                    </dd>
                </a></dl>
            -->

            </div>
        </div>
        <a class="more" :href="more_link">查看全部</a>
    </div>
</template>

<script lang="ts" setup>

import { ref } from 'vue'
import axios from 'axios';
const vite_url: string = window.VITE_URL
const chanpin_title: any = ref<string>('')
const chanpin_desc: any = ref<string>('')
const more_link: any = ref<string>('')
const chanpin_lunbo: any = ref<Array<object>>()
const chanpin_aside: any = ref<Array<object>>()
const get_chanpin = () => {


    const url = vite_url + '/yyjk/home/chanpin';

    // console.log(url,data)
    axios.get(url).then((res: any) => {

        chanpin_title.value = res.data.title;
        chanpin_desc.value = res.data.desc;
        more_link.value = res.data.more_link;
        chanpin_lunbo.value = res.data.lunbo;
        chanpin_aside.value = res.data.aside;

    });

}
get_chanpin();


</script>

<style>
.proimg .el-carousel{
    height:100%;
}
.proimg .el-carousel .el-carousel__container{
    height:100%;
}
.proimg .el-carousel__item{

    height:inherit;
}
</style>